<template>
    <div v-if="imageTotal > 0">
        <h3 style="margin-bottom: 20px;">生成镜像列表</h3>
        <Table border ref="selection" :columns="imageCol" :data="imageList"></Table>
        <Page
            :total="imageTotal"
            :current="queryImageInfo.pageIndex"
            :page-size="queryImageInfo.pageSize"
            :show-total="true"
            @on-change="changePage"
            style="margin: 20px 0px;"
            show-elevator
        />
    </div>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { getCreateImageList, delCreateImage } from '@/api/event';
export default {
    components: {},
    props: ['ecId', 'prjId', 'vmId'],
    data() {
        return {
            // 用户信息
            //userName:'',
            USER_ID: '',
            imageList: [],
            imageTotal: 0,
            imageCol: [
                {
                    title: '生成镜像ID',
                    key: 'newImageId',
                    tooltip: true
                },
                {
                    title: '生成镜像名称',
                    key: 'newImageName',
                    tooltip: true
                },
                {
                    title: '原镜像ID',
                    key: 'oldImageId',
                    tooltip: true
                },
                {
                    title: '原镜像名称',
                    key: 'imageName',
                    tooltip: true
                },
                {
                    title: '虚拟机ID',
                    key: 'vmId',
                    tooltip: true
                },
                {
                    title: '生成镜像状态',
                    key: 'imageStatus',
                    render: (h, params) => {
                        return h(
                            'span',
                            {
                                style: {
                                    cursor: 'auto',
                                    color: this.filterImageStatus(params.row.imageStatus, 'color')
                                }
                            },
                            this.filterImageStatus(params.row.imageStatus, 'text')
                        );
                    }
                },
                {
                    type: 'showTime',
                    title: '生成时间',
                    key: 'createTime',
                    tooltip: true
                },
                {
                    title: '操作',
                    key: 'actions',
                    render: (h, params) => {
                        return h(
                            'Poptip',
                            {
                                style: {},
                                props: {
                                    confirm: true,
                                    title: '您确定要删除吗？',
                                    transfer: true,
                                    disabled: params.row.newImageId ? false : true
                                },
                                on: {
                                    'on-ok': () => {
                                        this.delCreateImage(params.row);
                                    },
                                    'on-cancel': () => {}
                                }
                            },
                            [
                                h(
                                    'span',
                                    {
                                        style: {
                                            color: params.row.newImageId
                                                ? '#db4747'
                                                : 'hsla(0,0%,100%,.6)'
                                        }
                                    },
                                    '删除'
                                )
                            ]
                        );
                    }
                }
            ],
            queryImageInfo: {
                pageIndex: 1,
                pageSize: 10
            },
            timeout: 0
        };
    },
    created() {
        // 获取用户id
        this.USER_ID = this.$store.state.user.userId;
        //this.userName = this.$store.state.user.username
    },
    mounted() {
        this.getCreateImageList();
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/experiment') {
            //              to.query.page = this.$route.query.page
            next();
        } else {
            next();
        }
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        //调用部署接口
        getCreateImageList() {
            clearTimeout(this.timeout);
            if (!this.prjId) {
                retrun;
            }
            let params = Object.assign(this.queryImageInfo, {
                projectId: this.prjId,
                ecId: this.ecId
            })
            getCreateImageList(params)
                .then((res) => {
                    if (res.code === 1) {
                        this.imageList = res.data.items;
                        this.imageTotal = res.data.total;
                        if (this.imageList.some((image) => image.imageStatus == 0)) {
                            this.timeout = setTimeout(() => {
                                this.getCreateImageList();
                            }, 3000);
                        }
                        if (this.imageList.filter((image) => image.imageStatus == 1).length > 0) {
                            this.$emit(
                                'on-generate-finish',
                                this.imageList.filter((image) => image.imageStatus == 1)
                            );
                        }
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 3
                        });
                    }
                })
                .catch((err) => {
                    this.$Message.error('查询镜像列表异常')
                });
        },
        changePage(page) {
            this.queryImageInfo.pageIndex = page;
            this.getCreateImageList();
        },
        filterImageStatus(status, type) {
            let str = '',
                color = '';
            switch (status) {
                case 0:
                    str = '正在生成';
                    color = 'primary';
                    break;
                case 1:
                    str = '生成成功';
                    color = 'green';
                    break;
                case 2:
                    str = '生成失败';
                    color = 'error';
                    break;
                default:
                    break;
            }
            if (type == 'text') {
                return str;
            } else {
                return color;
            }
        },
        delCreateImage(imageInfo) {
            let imageId = imageInfo.oldImageId;
            let projectId = imageInfo.projectId;
            let vmId = imageInfo.vmId;
            let data = {
                imageId,
                projectId,
                vmId
            };
            delCreateImage(data)
                .then((res) => {
                    if (res.code === 1) {
                        this.$Message.info({
                            content: '删除成功',
                            duration: 3
                        });
                        this.getCreateImageList();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 3
                        });
                    }
                })
                .catch((err) => {
                    this.$Message.error('删除异常')
                });
        }
    }
};
</script>
<style scoped></style>
